<template>
  <uni-popup ref="pop" :maskClick="false">
    <view class="uni-tip">
      <view class="content-wrapper b-b">
        <view v-if="title" class="uni-tip-title">{{ title }}</view>
        <view class="uni-tip-content" :style="style">
          {{ desc }}
          <slot />
        </view>
      </view>
      <view class="uni-tip-group-button">
        <text
          v-if="cancelText"
		  :class="alertType === 1 ? 'uni-tip-button' : 'uni-other-button b-r'"
          class=" cancel"
          @click="onClick(false)"
        >{{ cancelText }}</text>
		<view v-if="cancelText" class="button-margin" style="width: 20rpx;"></view>
        <text :class="alertType === 1 ? 'uni-tip-button' : 'uni-other-button'" class="ok" @click="onClick(true)">
          {{
          okText
          }}
        </text>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  components: { uniPopup },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    okText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    },
	alertType: {
		type: Number,
		default: 1
	}
  },
  computed: {
    style: vm => ({ color: vm.title ? "#666" : "#333" })
  },
  methods: {
    onClick(isOk) {
	  if(this.alertType === 1) {
		  this.$refs.pop.close();
	  }
      this.$emit("update:show", false);
      this.$emit(isOk ? "onOk" : "onCancel");
    },
    open() {
      this.$refs.pop.open();
    },
    close() {
      this.$refs.pop.close();
    }
  },
  watch: {
    show(newValue) {
      const methodName = newValue ? "open" : "close";
      this.$refs.pop[methodName]();
    }
  }
};
</script>
<style lang="scss">
view {
  box-sizing: border-box;
}
/* 提示窗口 */
.uni-tip {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: column;
  /* #endif */

  width: 540rpx;
  background-color: #fff;
  border-radius: 16rpx;
  .content-wrapper {
    position: relative;
    padding: 56rpx 30rpx;
    padding-bottom: 48rpx;
    text-align: center;
  }
}
.uni-tip-title {
  margin-bottom: 30rpx;
  text-align: center;
  font-weight: 500;
  font-size: 34rpx;
  color: #333;
}
.uni-tip-content {
  font-size: 30rpx;
  line-height: 19px;
}
.uni-tip-group-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0rpx 32rpx 0rpx 32rpx;
}
.uni-tip-button {
  box-sizing: border-box;
  margin: 0rpx 0rpx 46rpx 0rpx;
  padding: 22rpx 0rpx 22rpx 0rpx;
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  background-color: #e8e8e8;
  border-radius: 44rpx;
  &.ok {
    color: #ffffff;
	background-color: $theme-color;
  }
}
.uni-tip-margin {
	width: 20rpx;
}
.uni-other-button {
	box-sizing: border-box;
	position: relative;
	padding: 15px;
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #333;
	white-space: nowrap;
	&.ok {
	  color: #ff0728;
	}
}
.b-r {
  border-right: 1px solid #F0F0F0;
}
</style>
